<!--
 * @Author: your name
 * @Date: 2022-01-12 10:52:24
 * @LastEditTime: 2022-01-12 11:36:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \0112\index.html
-->
<!-- 声明：告诉浏览器这是个html文件 -->
<!DOCTYPE html>
<!-- html标签 -->
<html lang="zh-CN">
<!-- head用来设置网页的属性 -->
<head>
    <!-- 设置中文字符 -->
    <meta charset="UTF-8">
    <!-- 设置兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置页面的相应比 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页小图标 -->
    <link href="https://g.csdnimg.cn/static/logo/favicon32.ico" rel="shortcut icon" type="image/x-icon">
    <!-- 网页标题 -->
    <title>考核营</title>
    <style>
        .top{
            background: turquoise;
        }
        .top div{
            height: 50px;
            border: 10px solid rgb(105, 248, 48);
        }
        .one{
            background: violet;
        }
        .two{
            background: blue;
        }
        .three{
            background: black;
        }
        .top .four{
            background: yellow;
        }
        .five{
            background: red;
        }
        .six{
            background: red !important;
        }
        .seven{
            background: rgb(143, 250, 72) !important;
        }
        #ten{
            background: rgb(236, 36, 236) !important;
        }
        .zero{
            background: yellowgreen;
        }
        /* id、class、标签、!important */
        /* 标签选择器（1）<class选择器（10）<id选择器（100）< !important(最优先)*/
        .border{
            width:0px;
            height:0px;
            /* background:yellow; */
            border: 20px solid transparent;   /*设置边框*/
            border-top: 20px solid red;
            border-right:20px solid black;
            border-bottom:20px solid green;
            border-left:20px solid blue;
            border-radius: 50%;    /*圆角边框*/
        }
    </style>
</head>
<!-- body：网页所有内容都存放在body中 -->
<body>
    <div class="top">
        <!-- 行内样式 style="" -->
        <div style="width: 100px;" class="one">一楼</div>
        <div style="width: 200px;" class="two">二楼</div>
        <div style="width: 300px;" class="three">三楼</div>
        <div style="width: 400px;" class="four zero">四楼</div>
        <div style="width: 500px; background: wheat;" id="ten" class="five six seven">五楼</div>
    </div>
    <div class="border"></div>
</body>
</html>